<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一起来做抗霾英雄！</title>
    <link rel="stylesheet" type="text/css" href="<%=path %>/mayday/css/reset.css">
    <link rel="stylesheet" type="text/css" href="<%=path %>/mayday/css/animate.css">
</head>
<body>
    <%-- <span id="musicControl">
        <a id="mc_play" class="onx">
            <audio id="musicfx" loop="loop" autoplay="true" src="<%=path %>/mayday/audio/m1.mp3"></audio>
        </a>
    </span> --%>
    <div class="animate">
        <img src="<%=path %>/mayday/img/animate/admission-bg.jpg" class="admission-bg" alt="">
        <div class="movein">
            <img src="<%=path %>/mayday/img/animate/mayday.png" class="mayday" alt="">
            <img src="<%=path %>/mayday/img/animate/alien.gif" class="alien-gif" alt="">
        </div>
        <div class="bar-con">
            <div class='bar orange' data-percent='100'></div>
        </div>
    </div>
    <div class="animate1">
        <img src="<%=path %>/mayday/img/animate/ship-bg.jpg" class="ship-bg" alt="">
        <img src="<%=path %>/mayday/img/animate/ship.png" class="ship" alt="">
        <img src="<%=path %>/mayday/img/animate/moon.png" class="moon" alt="">
        <img src="<%=path %>/mayday/img/animate/jupiter.png" class="jupiter" alt="">
        <img src="<%=path %>/mayday/img/animate/pluto.png" class="pluto" alt="">
        <img src="<%=path %>/mayday/img/animate/twinkling.png" class="twinkling" alt="">
    </div>
    <img src="<%=path %>/mayday/img/animate/alien-an2.gif" class="alien" alt="">
    <div class="animate2">
        <img src="<%=path %>/mayday/img/animate/alien-bg.jpg" class="alien-bg" alt="">
        <img src="<%=path %>/mayday/img/animate/earth.png" class="earth" alt="">
        <!--<img src="img/animate/alien-bg.jpg" class="alien-bg" alt="">
        <img src="img/animate/alien.png" class="alien" alt="">-->
    </div>
    <script type="text/javascript" src="<%=path %>/mayday/js/main.js"></script>    
    <script type="text/javascript" src="<%=path %>/mayday/js/jquery-2.2.3.min.js"></script>
     <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script type="text/javascript">
        //微信jssdk config
        wx.config({
            debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId : '${signObj.appid}', // 必填，公众号的唯一标识
            timestamp : '${signObj.timestamp}', // 必填，生成签名的时间戳
            nonceStr : '${signObj.noncestr}', // 必填，生成签名的随机串
            signature : '${signObj.signature}',// 必填，签名，见附录1
            jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
            'onMenuShareTimeline', //分享给好友
            'onMenuShareAppMessage', //分享到朋友圈
            'onMenuShareQZone', //分享到Q空间
            'onMenuShareWeibo',//分享到微博
            'onMenuShareQQ'//分享到qq
            ]
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        var title="这个五一，一起做抗霾英雄！";
        var description="再不行动，听说我们的下一代就要这样生活";
        var imgUrl="${basePath}/<%=path %>/mayday/img/share.jpg";
        var shareBaseUrl='${baseUrl}';
        wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
            wx.onMenuShareTimeline({ //分享到朋友圈的API  
                        title : title, // 分享标题
                        link : shareBaseUrl+'/auth2.html', // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareAppMessage({//分享到朋友 
                        title : title, // 分享标题
                        desc : description, // 分享描述
                        link : shareBaseUrl+'/auth2.html', // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        type : 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareQZone({//分享到qq空间
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'//auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareWeibo({
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'/auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareQQ({//分享到qq
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'/auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                   // 用户取消分享后执行的回调函数
                }
            });
        });
    </script>
    <script>
    $(function (){
       /*  $('#mc_play').click(function () {
            if ($('#mc_play').hasClass('onx')){
                $('#mc_play audio').get(0).pause();
                $('#mc_play').attr('class','stop');
            }else{
                $('#mc_play audio').get(0).play();
                $('#mc_play').attr('class','onx');
            }
            $('#music_play_filter').hide();
            event.stopPropagation(); //阻止冒泡 
        })
        function audioAutoPlay(id){
            var audio = document.getElementById(id);
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        function just_play(id){
            $('#mc_play audio').get(0).play();
            $('#mc_play').attr('class','onx');
            if (typeof(id)!='undefined'){
                $('#music_play_filter').hide();
            }
            event.stopPropagation(); //阻止冒泡 
        }
        function is_weixn(){
            return false;
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger") {
                return true;
            } else {
                return false;
            }
        }
        window.onload=function(){
            if (!is_weixn()){
                just_play();                    
            }
        }
        audioAutoPlay('musicfx'); */
        $('.movein').animate({'right': 0}, 1000, function (){
            $('.alien-gif').css('display', 'block');
            setTimeout(function (){
                $('.animate').fadeOut(1200, function (){
                    $('.animate1').fadeIn(1200, function (){
                        var shipFly;
                        var twinkling;
                        $('.ship').animate({'width': '50%', 'top': '4rem', 'right': '25%'}, 1000, function (){
                            $('.ship').css({"animation":"ship .4s infinite linear alternate"});
                            twinkling = setTimeout(function (){
                                $('.twinkling').css({'display': 'block', 'animation':'twinkling .2s infinite ease-in-out alternate'});
                            }, 400)
                        });
                        var change = setTimeout(function (){
                            $('.animate1').fadeOut(1200, function (){
                                var a = ($(window).width() - $('.earth').width()) / 2;
                                $('.earth').css('left', a);
                                $('.alien').css('display', 'block');
                                $('.animate2').fadeIn(1200, function (){
                                    setTimeout(function (){
                                        $('.earth').css({'transform': 'scale(4,4)', 'transition': '1s'});
                                        $('.alien').css('display', 'none');
                                    }, 1600);
                                    setTimeout(function (){
                                        $('.animate2').fadeOut(1200, function () {
                                            window.location.href = '<%=path %>/mayday/map.html';
                                        });
                                    }, 2000);
                                });
                            });
                            clearInterval(shipFly);
                            clearTimeout(twinkling);
                        }, 2000)
                    });
                })
            }, 1500);
        });
    })
    </script>
</body>
</html>
